<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚀jsBOM自适应与响应式</title>
    <link rel="stylesheet" href="./home.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        body {
            background-color: var(--themeBacColor);
        }

        #window-navigator {
            color: var(--themeColor);
        }
    </style>
</head>

<body>
    <div id="open-window">点击打开新窗口</div>
    <div id="close-window">点击关闭当前窗口</div>
    <div id="jump-page">点击跳转页面</div>
    <div id="get-location">点击获取Window.location相关的属性</div>
    <!-- Window Navigator相关内容 -->
    <div id="window-navigator"></div>
    <div id="window-alert">警告框</div>
    <div id="window-confirm">确定框</div>
    <div id="window-prompt">提示框</div>
    <div id="window-times">点击定时器</div>
</body>
<script>
    // screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
    document.write("可用宽度: " + screen.availWidth);
    //screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。
    document.write("可用高度: " + screen.availHeight);

    let openWindow = document.querySelector('#open-window')
    let closeWindow = document.querySelector('#close-window')
    let jumpPage = document.querySelector('#jump-page')
    let getLocation = document.querySelector('#get-location')
    let windowNavigator = document.querySelector('#window-navigator')
    let windowAlert = document.querySelector('#window-alert')
    let windowConfirm = document.querySelector('#window-confirm')
    let windowPrompt = document.querySelector('#window-prompt')
    let windowTimes = document.querySelector('#window-times')

    // BOM的Window可以省略不写
    //监听窗口大小的变化
    window.addEventListener('resize', function () {
        var width = window.innerWidth //浏览器窗口的内部宽度(包括滚动条)
        var height = window.innerHeight;//浏览器窗口的内部高度(包括滚动条)
        console.log(`现在浏览器的宽度是${width}，高度是${height}`);
    })
    // 打开新窗口
    openWindow.addEventListener('click', function () {
        window.open('./充电加载动态效果.html')
    })
    //关闭当前窗口
    closeWindow.addEventListener('click', () => {
        window.close()
    })
    //跳转页面
    jumpPage.addEventListener('click', () => {
        window.location.href = './加载中动画效果.html'
    })
    //获取location相关的属性
    getLocation.addEventListener('click', () => {
        console.log('获取当前页面的URL地址:' + window.location.href);
        console.log('获取当前web主机的域名:' + window.location.hostname);
        console.log('获取当前页面的路径和文件名:' + window.location.pathname);
        console.log('获取web主机的端口:' + window.location.port);
        console.log('获取所使用的web协议:' + window.location.protocol);
    })
    //  Window.history  history.go(1) 1前进 -1后退 0刷新

    //Navigator
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt += "<p>浏览器名称: " + navigator.appName + "</p>";
    txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt += "<p>硬件平台: " + navigator.platform + "</p>";
    txt += "<p>用户代理: " + navigator.userAgent + "</p>";
    txt += "<p>用户代理语言: " + navigator.language + "</p>";
    windowNavigator.innerHTML = txt;
    //弹窗
    windowAlert.addEventListener('click', () => {
        alert('我是警告弹窗~')
    })
    windowConfirm.addEventListener('click', () => {
        let result = confirm('我是确认弹窗~')
        console.log(result);
        if (result) {
            alert('你点击了确定按钮')
        } else {
            alert('你点击了取消按钮')
        }
    })
    windowPrompt.addEventListener('click', () => {
        let result = prompt('我是提示弹窗~')
        if (result) {
            console.log(result);
            alert('你输入的内容是:' + result)
        }
    })
    //开启定时器
    let setTime
    let n = 10
    windowTimes.addEventListener('click', () => {
        setTime = setInterval(() => {
            getTimes()
        }, 1000);
    })
    function getTimes() {
        if (n == 0) {
            clearInterval(setTime)
        }
        console.log(n);
        n = n - 1
    }

</script>

</html>